<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 设置编码: 防止乱码 -->
  <meta charset="UTF-8">
  <!-- 设置视口: 防止移动端出现缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 设置网页关键词 -->
  <meta name="keyWords" content="电子设备, 网络通讯器材">
  <!-- 设置网页描述信息 -->
  <meta name="description" content="御码商城是一个品类齐全的在线购物平台">
  <!-- 设置网页图标 -->
  <link rel="icon" href="./favicon.ico">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  <title>御码商城</title>
</head>
<body>
    <!-- 顶部广告区域 -->
    <div class="top_banner" id="hidden">
        <div class="w">
            <a href="#"><img src="./img/banner.avif" alt=""></a>
            <!-- 关闭按钮 -->
            <a href="#hidden">X</a>
        </div>
    </div>

    <!-- 顶部导航区域 -->
    <div class="topNav">
        <div class="w">
            <!-- 左侧盒子 -->
            <div class="leftNav">
               <span class="iconfont icon-map"></span>
               <a href="#">北京</a>
            </div>

            <!-- 右侧盒子 -->
            <div class="rightNav">
                <ul>
                   <li><a href="#">你好,请登录</a></li>
                   <li><a href="#">免费注册</a></li>
                   <li>
                      <a href="#">我的订单</a>
                      <span class="iconfont icon-arrow-down-bold"></span>
                      <div class="menu">
                         <div class="top_item public">
                             <a href="#">待处理订单</a>
                             <a href="#">待处理订单</a>
                             <a href="#">待处理订单</a>
                             <a href="#">待处理订单</a>
                         </div>
                         <div class="middle_item  public">
                             <a href="#">我的京东</a>
                             <a href="#">我的京东</a>
                             <a href="#">我的优惠券</a>
                         </div>
                         <div class="bot_item  public">
                              <a href="#">帮助中心</a>
                              <a href="#">优惠服务</a>
                         </div>
                      </div>
                   </li>
                   <li>
                    <a href="#">我的御码</a>
                     <span class="iconfont icon-arrow-down-bold"></span>
                      <div class="menu"></div>
                  </li>
                   <li>
                      <a href="#">企业采购</a>
                       <span class="iconfont icon-arrow-down-bold"></span>
                      <div class="menu"></div>
                   </li>
                   <li><a href="#">商家服务</a></li>
                   <li><a href="#">网站导航</a></li>
                   <li><a href="#">手机御码</a></li>
                   <li><a href="#">网站无障碍</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- logo区域 -->
    <div class="logo">
        <div class="w">
            <!-- 左侧logo -->
            <div class="left_logo">
                <a href="#"><img src="./img/LOGO@1x.png" alt=""></a>
            </div>

            <!-- 中间搜索区域 -->
            <div class="middle_search">
                <!-- 搜索框 -->
                <div class="search_box">
                    <input type="text" placeholder="手机/华为/苹果17">
                    <input type="button">
                    <span class="iconfont icon-search"></span>
                </div>

                <!-- 购物车 -->
                <div class="car">
                   <span class="iconfont  icon-cart-full"></span>
                   购物车
                </div>

                <!-- 热词搜索 -->
                <div class="hot_words">
                    <ul>
                       <li><a href="#">家电年货节</a></li>
                       <li><a href="#">全球买手</a></li>
                       <li><a href="#">兔年焕新</a></li>
                       <li><a href="#">热水器</a></li>
                       <li><a href="#">血氧检测</a></li>
                       <li><a href="#">车厘子</a></li>
                       <li><a href="#">手机免息</a></li>
                       <li><a href="#">御码精选</a></li>
                       <li><a href="#">热卖潮品</a></li>
                    </ul>
                </div>

                <!-- 主体导航 -->
                <div class="nav">
                    <ul>
                       <li><a href="#">御码超市</a></li>
                       <li><a href="#">优惠券</a></li>
                       <li><a href="#">买啥</a></li>
                       <li><a href="#">御码家电</a></li>
                       <li><a href="#">御码生鲜</a></li>
                       <li><a href="#">PLUS会员</a></li>
                       <li><a href="#">进口好物</a></li>
                       <li><a href="#">品牌闪购</a></li>
                       <li><a href="#">拍卖</a></li>
                       <li><a href="#">五金商店</a></li>
                    </ul>
                </div>
            </div>


            <!-- 右侧广告 -->
            <div class="right_banner">
                <a href="#"><img src="./img/right_banner1.gif" alt=""></a>
            </div>
        </div>
    </div>

    <!-- 居中版心盒子 -->
    <div class="main_body">
        <div class="w">
            <!-- 主体广告区域 -->
            <div class="main_banner clearfix">
                <!-- 左侧导航 -->
                <div class="left_aside">
                    <ul>
                        <li>
                            <a href="#">手机/运营商/数码</a>
                            <div class="second_menu"></div>
                        </li>
                        <li><a href="#">电脑/办公</a></li>
                        <li><a href="#">家具/家居/家装/厨具</a></li>
                        <li><a href="#">男装/女装/童装/内衣</a></li>
                        <li><a href="#">美妆/个护清洁/宠物</a></li>
                        <li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
                        <li><a href="#">男鞋/运动/户外</a></li>
                        <li><a href="#">房产/汽车/汽车用品</a></li>
                        <li><a href="#">母婴/玩具乐器</a></li>
                        <li><a href="#">食品/酒类/生鲜/特产</a></li>
                        <li><a href="#">艺术/礼品鲜花/农资绿植</a></li>
                        <li><a href="#">医药保健/计生情趣</a></li>
                        <li><a href="#">图书/文娱/教育/电子书</a></li>
                        <li><a href="#">机票/酒店/旅游/生活</a></li>
                        <li><a href="#">众筹/白条/保险/企业金融</a></li>
                        <li><a href="#">安装/维修/清洗/二手</a></li>
                    </ul>
                </div>
                <!-- 中间轮播图 -->
                <div class="scroll_img">
                     <ul class="clearfix">
                         <li id="one"><a href="#"><img src="./img/1.jpg" alt=""></a></li>
                         <li id="two"><a href="#"><img src="./img/2.jpg" alt=""></a></li>
                         <li id="three"><a href="#"><img src="./img/3.jpg" alt=""></a></li>
                         <li id="four"><a href="#"><img src="./img/4.jpg" alt=""></a></li>
                         <li id="five"><a href="#"><img src="./img/5.jpg" alt=""></a></li>
                         <li id="six"><a href="#"><img src="./img/banner_主图@1x.png" alt=""></a></li>
                     </ul>
                     <div class="btns">
                          <a href="#"></a>
                          <a href="#"></a>
                          <a href="#"></a>
                          <a href="#"></a>
                          <a href="#"></a>
                          <a href="#"></a>
                     </div>
                </div>

                <!-- 右侧广告区域 -->
                <div class="right_banner">
                      <a href="#"><img src="./img/Rectangle11@1x.png" alt=""></a>
                      <a href="#"><img src="./img/Rectangle11@1x.png" alt=""></a>
                      <a href="#"><img src="./img/Rectangle11@1x.png" alt=""></a>
                </div>
                <!-- 右侧服务列表 -->
                <div class="right_service_list">
                     <!-- 用户信息列表 -->
                     <div class="userMsg">
                          <div class="topimg clearfix">
                              <img src="./img/Ellipse1@1x.png" alt="">
                              <div class="userinfo">
                                  <h4>Hi~ 欢迎光临御码</h4>
                                  <a href="#">登录</a>
                                  <div class="line"></div>
                                  <a href="#">注册</a>
                              </div>
                          </div>

                          <div class="tips">
                              <span>新人福利</span>
                              <span>御码会员</span>
                          </div>
                     </div>

                     <!-- 御码快报 -->
                     <div class="yuma">
                         <div class="title  clearfix">
                              <h4>御码快报</h4>
                              <a href="#">更多></a>
                         </div>
                         <div class="content">
                             <div class="item">
                                 <span>热评</span>
                                 <p>毛衣直筒裤才是YYDS</p>
                             </div>
                             <div class="item">
                                 <span>热评</span>
                                 <p>毛衣直筒裤才是YYDS</p>
                             </div>

                             <div class="item">
                                 <span>热评</span>
                                 <p>毛衣直筒裤才是YYDS</p>
                             </div>

                             <div class="item">
                                 <span>热评</span>
                                 <p>毛衣直筒裤才是YYDS</p>
                             </div>
                         </div>
                     </div>

                     <!-- 服务列表 -->
                     <div class="service_list">
                          <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                           <div class="item">
                             <span class="bg"></span>
                             <p>话费</p>
                          </div>
                     </div>
                </div>
            </div>

            <!-- 秒杀区域 -->
            <div class="seckill">
                <div class="left_seckill  left">
                     <h4>秒杀专场</h4>
                     <a href="#"><img src="./img/Rectangle31@1x.png" alt=""></a>
                </div>

                <div class="middle_seckill left">
                     <div class="item">
                         <img src="./img/Rectangle33@1x.png" alt="">
                         <p>荣耀60SE120Hz十亿色曲面屏66W超级快充6400万Vlog相机全网通版5G手机8GB+256GB亮黑色</p>
                         <p>$2590</p>
                     </div>

                      <div class="item">
                         <img src="./img/Rectangle33@1x-3.png" alt="">
                         <p>荣耀60SE120Hz十亿色曲面屏66W超级快充6400万Vlog相机全网通版5G手机8GB+256GB亮黑色</p>
                         <p>$2590</p>
                     </div>

                      <div class="item">
                         <img src="./img/Rectangle33@1x-2.png" alt="">
                         <p>荣耀60SE120Hz十亿色曲面屏66W超级快充6400万Vlog相机全网通版5G手机8GB+256GB亮黑色</p>
                         <p>$2590</p>
                     </div>

                      <div class="item">
                         <img src="./img/Rectangle33@1x-1.png" alt="">
                         <p>荣耀60SE120Hz十亿色曲面屏66W超级快充6400万Vlog相机全网通版5G手机8GB+256GB亮黑色</p>
                         <p>$2590</p>
                     </div>
                </div>

                <div class="right_seckill right">
                     <a href="#"><img src="./img/扫描二维码@1x.png" alt=""></a>
                </div>
            </div>
        </div>
        <!-- 购物节 -->
        <div class="shopping">
            <ul>
                <li>
                     <img src="./img/年货产品图01@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图02@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图03@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图04@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图05@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图06@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图07@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图08@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图09@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图10@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图11@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>

                <li>
                     <img src="./img/年货产品图12@1x.png" alt="">
                     <p>至高24期免息</p>
                     <p>酒水好店</p>
                </li>
            </ul>
        </div>
         <!-- 版心 -->
        <div class="w">
            <!-- 每日特价 -->
            <div class="special  clearfix">
                 <!-- 左侧盒子 -->
                 <div class="left_special left">
                      <div class="title clearfix">
                          <h4 class="left">每日特价</h4>
                          <img src="./img/icon_更多@1x.png" alt="" class="left">
                          <a href="#" class="right">精选</a>
                      </div>
                      <div class="content">
                          <div class="left_content left">
                               <img src="./img/最近7天低价@1x.png" alt="">
                               <a href="#">
                                  <img src="./img/每日特价产品图01@1x.png" alt="">
                               </a>

                               <p>赣南精品脐橙一箱</p>
                               <p>$99.99</p>
                               <p>已经抢购1320件</p>
                          </div>
                          <div class="right_content right">
                              <div class="item">
                                  <img src="./img/每日特价产品图05@1x.png" alt="">
                                  <p>赣南精品脐橙一箱</p>
                                  <p>$99.99</p>
                                  <p>已抢购320件</p>
                              </div>

                              <div class="item">
                                  <img src="./img/每日特价产品图02@1x.png" alt="">
                                  <p>赣南精品脐橙一箱</p>
                                  <p>$99.99</p>
                                  <p>已抢购320件</p>
                              </div>

                              <div class="item">
                                  <img src="./img/每日特价产品图03@1x.png" alt="">
                                  <p>赣南精品脐橙一箱</p>
                                  <p>$99.99</p>
                                  <p>已抢购320件</p>
                              </div>

                              <div class="item">
                                  <img src="./img/每日特价产品图04@1x.png" alt="">
                                  <p>赣南精品脐橙一箱</p>
                                  <p>$99.99</p>
                                  <p>已抢购320件</p>
                              </div>
                          </div>
                      </div>
                 </div>
                 <!-- 右侧盒子 -->
                 <div class="left_special left">
                      <div class="title clearfix">
                          <h4 class="left">每日特价</h4>
                          <img src="./img/icon_更多@1x.png" alt="" class="left">
                          <a href="#" class="right">精选</a>
                      </div>
                      <div class="content">
                          <div class="left_content left">
                               <img src="./img/最近7天低价@1x.png" alt="">
                               <a href="#">
                                  <img src="./img/每日特价产品图01@1x.png" alt="">
                               </a>

                               <p>赣南精品脐橙一箱</p>
                               <p>$99.99</p>
                               <p>已经抢购1320件</p>
                          </div>
                          <div class="right_content right">
                              <div class="item">
                                  <img src="./img/每日特价产品图02@1x.png" alt="">
                                  <p>赣南精品脐橙一箱</p>
                                  <p>$99.99</p>
                                  <p>已抢购320件</p>
                              </div>

                              <div class="item">
                                  <img src="./img/每日特价产品图03@1x.png" alt="">
                                  <p>赣南精品脐橙一箱</p>
                                  <p>$99.99</p>
                                  <p>已抢购320件</p>
                              </div>

                              <div class="item">
                                  <img src="./img/每日特价产品图04@1x.png" alt="">
                                  <p>赣南精品脐橙一箱</p>
                                  <p>$99.99</p>
                                  <p>已抢购320件</p>
                              </div>

                              <div class="item">
                                  <img src="./img/每日特价产品图05@1x.png" alt="">
                                  <p>赣南精品脐橙一箱</p>
                                  <p>$99.99</p>
                                  <p>已抢购320件</p>
                              </div>
                          </div>
                      </div>
                 </div>
            </div>
            <!-- 全球购 -->
            <div class="global">
                 <div class="title">全球购</div>
                 <div class="content">
                     <div class="item left">
                          <a href="#"><img src="./img/全球购产品图02@1x.png" alt=""></a>
                          <div class="public">
                               <div class="public_title clearfix">
                                    <h4 class="left">御码寻宝</h4>
                                    <span class="left">懂你的御码汇</span>
                               </div>
                               <div class="public_content clearfix">
                                   <a href="#"><img src="./img/全球购产品图09@1x.png" alt=""></a>
                                   <a href="#"><img src="./img/全球购产品图10@1x.png" alt=""></a>
                               </div>
                          </div>
                     </div>
                     <div class="item left">
                          <a href="#"><img src="./img/全球购产品图01@1x.png" alt=""></a>
                          <div class="public">
                               <div class="public_title clearfix">
                                    <h4 class="left">御码寻宝</h4>
                                    <span class="left">懂你的御码汇</span>
                               </div>
                               <div class="public_content clearfix">
                                   <a href="#"><img src="./img/全球购产品图17@1x.png" alt=""></a>
                                   <a href="#"><img src="./img/全球购产品图18@1x.png" alt=""></a>
                               </div>
                          </div>
                     </div>
                      <div class="item left">
                          
                          <div class="public">
                               <div class="public_title clearfix">
                                    <h4 class="left">御码寻宝</h4>
                                    <span class="left">懂你的御码汇</span>
                               </div>
                               <div class="public_content clearfix">
                                   <a href="#"><img src="./img/全球购产品图03@1x.png" alt=""></a>
                                   <a href="#"><img src="./img/全球购产品图04@1x.png" alt=""></a>
                               </div>
                          </div>

                          <div class="public">
                               <div class="public_title clearfix">
                                    <h4 class="left">御码寻宝</h4>
                                    <span class="left">懂你的御码汇</span>
                               </div>
                               <div class="public_content clearfix">
                                   <a href="#"><img src="./img/全球购产品图05@1x.png" alt=""></a>
                                   <a href="#"><img src="./img/全球购产品图06@1x.png" alt=""></a>
                               </div>
                          </div>

                          <div class="public">
                               <div class="public_title clearfix">
                                    <h4 class="left">御码寻宝</h4>
                                    <span class="left">懂你的御码汇</span>
                               </div>
                               <div class="public_content clearfix">
                                   <a href="#"><img src="./img/全球购产品图07@1x.png" alt=""></a>
                                   <a href="#"><img src="./img/全球购产品图08@1x.png" alt=""></a>
                               </div>
                          </div>
                     </div>
                     <div class="item left">
                          
                          <div class="public">
                               <div class="public_title clearfix">
                                    <h4 class="left">御码寻宝</h4>
                                    <span class="left">懂你的御码汇</span>
                               </div>
                               <div class="public_content clearfix">
                                   <a href="#"><img src="./img/全球购产品图11@1x.png" alt=""></a>
                                   <a href="#"><img src="./img/全球购产品图12@1x.png" alt=""></a>
                               </div>
                          </div>

                          <div class="public">
                               <div class="public_title clearfix">
                                    <h4 class="left">御码寻宝</h4>
                                    <span class="left">懂你的御码汇</span>
                               </div>
                               <div class="public_content clearfix">
                                   <a href="#"><img src="./img/全球购产品图13@1x.png" alt=""></a>
                                   <a href="#"><img src="./img/全球购产品图14@1x.png" alt=""></a>
                               </div>
                          </div>

                          <div class="public">
                               <div class="public_title clearfix">
                                    <h4 class="left">御码寻宝</h4>
                                    <span class="left">懂你的御码汇</span>
                               </div>
                               <div class="public_content clearfix">
                                   <a href="#"><img src="./img/全球购产品图15@1x.png" alt=""></a>
                                   <a href="#"><img src="./img/全球购产品图16@1x.png" alt=""></a>
                               </div>
                          </div>
                     </div>
                 </div>
            </div>
            
        </div>
    </div>

</body>
</html>